<div
  class="accessory-box"
  [ngClass]="{ 'accessory-on': service.values.On || service.values.Active }"
  (longClick)="onLongClick()"
  (shortClick)="onClick()"
  tabindex="0"
>
  <div class="d-flex flex-column h-100">
    <div
      [attr.aria-label]="'accessories.core.fan' | translate"
      class="accessory-svg"
      [ngClass]="{
        'spin': (service.values.On || service.values.Active) && (!hasRotationDirection || (hasRotationDirection && service.values.RotationDirection === 0)),
        'spin-counter': (service.values.On || service.values.Active) && hasRotationDirection && service.values.RotationDirection === 1,
      }"
    >
      <svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
        <!-- fan icon -->
        <g transform="translate(-0.85, 0.2) scale(0.99)">
          <path
            class="fan-blades"
            fill="#7f7f7f"
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M20.988 10.265c.382-.596.951-1.424 1.844-2.71C25.462 3.61 23.456 0 18 0c-6.263 0-10.09 5.649-6.835 11.923-.594-.382-1.416-.948-2.682-1.826-3.945-2.63-7.555-.625-7.555 4.832 0 6.308 5.73 10.145 12.057 6.763-.383.599-.958 1.436-1.872 2.753C8.485 28.39 10.49 32 15.947 32c6.267 0 10.095-5.655 6.83-11.932.593.382 1.412.946 2.668 1.818 3.945 2.63 7.555.625 7.555-4.832 0-6.293-5.703-10.127-12.012-6.788Zm-.407 2.602C26.101 8.924 31 11.805 31 17.053c0 3.877-1.845 4.902-4.445 3.169-2.525-1.761-3.46-2.385-4.406-2.763a7.87 7.87 0 0 0-1.01-.317c.105-.382.161-.785.161-1.2 0-1.327-.919-3.134-.919-3.134ZM18.405 10.85c.378-.946 1.001-1.88 2.763-4.405C22.902 3.845 21.877 2 18 2c-5.247 0-8.129 4.899-4.186 10.419 0 0 1.89-.919 3.186-.919.398 0 .783.052 1.15.149.064-.269.149-.533.255-.798ZM11.78 14.524c-.946-.378-1.88-1.001-4.405-2.763-2.6-1.734-4.445-.709-4.445 3.168 0 5.247 4.899 8.129 10.419 4.186 0 0-.848-1.812-.848-3.115 0-.416.057-.819.163-1.201a7.81 7.81 0 0 0-1.183-.275Zm3.763 6.625c-.378.946-1.001 1.88-2.763 4.405-1.734 2.6-.709 4.445 3.168 4.445 5.248 0 8.13-4.899 4.187-10.419 0 0-1.831.919-3.133.919-.416 0-.819-.057-1.201-.162a7.802 7.802 0 0 0-.258.812ZM17 19.5c-1.933 0-3.5-1.567-3.5-3.5s1.567-3.5 3.5-3.5 3.5 1.567 3.5 3.5-1.567 3.5-3.5 3.5Z"
          />
        </g>
        <!-- middle circle -->
        <circle cx="16" cy="16" r="3.6" stroke="#7f7f7f" stroke-width="2" fill="#1976d2" fill-opacity="0.5" />
      </svg>
    </div>
    <div class="accessory-label mt-auto">{{ service.customName || service.serviceName }}</div>
    @if (service.values.On && service.values.RotationSpeed) {
    <div class="accessory-label grey-text">{{ service.values.RotationSpeed }}{{ rotationSpeedUnit }}</div>
    } @else {
    <div
      class="accessory-label grey-text"
      [innerText]="((service.values.On || service.values.Active) ? 'accessories.control.on' : 'accessories.control.off') | translate"
    ></div>
    }
  </div>
</div>
